<template>
	<div class="article">
		<div style="flex:1;">
			<div class="main">
				<div class="title" v-if="!storeid">最近动态</div>
				<el-empty description="暂无文章" style="flex:1" v-if="!articles.length > 0"></el-empty>
				<div style="display:flex;flex-direction:column;flex:1;" v-else>
					<articleitem v-for="article in currentarticle" v-bind="article" :key="article.id"
						style="flex:1;margin-bottom: 10px;z-index: 99;">
					</articleitem>
				</div>

			</div>
			<div style="width: 100%;display: flex;justify-content: center;margin-top: 20px;margin-bottom: 20px;"
				v-if="articles.length > 0">
				<el-pagination background layout="prev, pager, next" :page-count="pagesum" :current-page.sync="pager"
					@current-change="handleCurrentChange">
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
import { getarticle, getarticlebystore } from '../../api/api.js'
import articleitem from './articleitem.vue'
export default {
	name: 'articlepage',
	components: {
		articleitem
	},
	props: {
		storeid: String
	},
	data() {
		return {
			pagesum: 1,
			pager: 1,
			currentarticle: '',
			articles: ''
		}
	},
	created() {
		this.getarticle();
	},
	methods: {
		getcurrentarticle() {
			let pager = this.pager;
			this.currentarticle = this.articles.filter(function (value, index) {
				return (index >= (pager - 1) * 10 && index < pager * 10)
			})
		},
		handleCurrentChange(val) {
			this.pager = val;
			this.getcurrentarticle();
		},
		getarticle() {
			if (this.storeid) {
				getarticlebystore(this.storeid).then(res => {
					if (res.data.code == 200) {
						this.articles = res.data.data;
						this.pagesum = Math.ceil(this.articles.length / 10);
						this.getcurrentarticle();
					} else {
						this.$message.warning('获取文章失败，请稍后再试');
					}
				})
			} else {
				getarticle().then(resp => {
					if (resp.data.code == 200) {
						this.articles = resp.data.data;
						this.pagesum = Math.ceil(this.articles.length / 10);
						this.getcurrentarticle();
					} else {
						this.$message.warning('获取文章失败，请稍后再试');
					}
				})
			}



		}
	}
}
</script>

<style scoped="scoped">
.article {
	max-width: 100%;
	min-width: 700px;
	min-height: 350px;
	margin-top: 20px;
	border-radius: 10px;
	z-index: 0;
	padding: 0 0 10px 0;
	overflow: visible;
	box-shadow: 0 5px 10px rgba(212, 212, 212, 0.5);
}

.main {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-wrap: wrap;
}

.title {
	width: 100%;
	margin: 20px 20px 5px 20px;
	color: rgb(45, 44, 44);
	padding: 10px;
	border-bottom: 1px solid #e5e6eb;
}
</style>
